
<template>
  <div class="box">
    <el-select
        v-model="currentSelect"
        placeholder="选择疾病查看患病率"
        size="large"
        style="width: 240px"
        default-first-option
        @change="onSelectChanged"
    >
      <el-option
          v-for="d in diseases"
          :key="d"
          :label="d"
          :value="d"
      />
    </el-select>
    <div
        ref="myChart"
        style="height:630px; width: 100%;"
        id="main"
    >
    </div>
    <el-table
        :data="data"
        :default-sort="{ prop: 'value', order: 'descending' }"
        :cell-class-name="tableRowClassName"
        height="300"
        class="distribution-table"
        style="width: 26%;"
    >
      <el-table-column prop="name" label="省份" width="130">
      </el-table-column>
      <el-table-column prop="value" label="患病数">
        <template #default="scope">
          {{scope.row.value}}株
        </template>
      </el-table-column>
      <el-table-column label="发布预警信息" width="110">
        <template #default="scope">
          <el-button
              size="small"
              type="primary"
              @click="submitWarningInfo(scope.$index, scope.row)"
          >
            预警
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogFormVisible" title="预警信息表" width="500" >
      <el-form :model="form"
               status-icon
               :label-position="'right'"
               style="width: 80%;margin: 0 auto"
      >
        <el-form-item label="预警省市" label-width="100px">
          <el-input v-model="form.province"  readonly/>
        </el-form-item>
        <el-form-item label="病害名称" label-width="100px">
          <el-input v-model="form.diseaseName" type="text" readonly />
        </el-form-item>
        <el-form-item label="患病率" label-width="100px">
          <el-input v-model="form.diseaseRate" readonly>
            <template #append>%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="预警信息" label-width="100px">
          <el-input v-model="form.info" type="text"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelWarningInfo">取消</el-button>
          <el-button type="primary" @click="confirmWarningInfo">确认</el-button>
        </div>
      </template>
    </el-dialog>

  </div>

</template>

<script setup>
import * as echarts from 'echarts'
import chinaJSON from '../../utils/china.json'
import {onBeforeMount, onMounted, ref} from 'vue'
import request from "@/utils/request";
import {ElMessage} from "element-plus";
const myChart = ref()
const diseases = [
  "全部","细菌性枯萎病", "细菌性条斑病", "劣种", "褐斑病", "稻瘟病",
  "稻粒黑粉病", "鞘腐病", "三种化学蛀茎虫", "蓟马", "飞虱"
]
function getDateString(){
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let Hours = date.getHours();
  let Minutes = date.getMinutes();
  let Seconds = date.getSeconds();
  if (month < 10) {
    month = "0" + month;
  }
  if (day < 10) {
    day = "0" + day;
  }
  if (Hours < 10) {
    Hours = "0" + Hours;
  }
  if (Minutes < 10) {
    Minutes = "0" + Minutes;
  }
  if (Seconds < 10) {
    Seconds = "0" + Seconds;
  }
  return year + '-' + month + '-' + day + ' ' + Hours + ':' + Minutes + ':' + Seconds;

}
//各省份的数据
let data = ref([
  {
    name: '北京市'
  }, {
    name: '天津市'
  }, {
    name: '上海市'
  }, {
    name: '重庆市'
  }, {
    name: '河北省'
  }, {
    name: '河南省'
  }, {
    name: '云南省'
  }, {
    name: '辽宁省'
  }, {
    name: '黑龙江省'
  }, {
    name: '湖南省'
  }, {
    name: '安徽省'
  }, {
    name: '山东省'
  }, {
    name: '新疆维吾尔自治区'
  }, {
    name: '江苏省'
  }, {
    name: '浙江省'
  }, {
    name: '江西省'
  }, {
    name: '湖北省'
  }, {
    name: '广西壮族自治区'
  }, {
    name: '甘肃省'
  }, {
    name: '山西省'
  }, {
    name: '内蒙古自治区'
  }, {
    name: '陕西省'
  }, {
    name: '吉林省'
  }, {

    name: '福建省'
  }, {
    name: '贵州省'
  }, {
    name: '广东省'
  }, {
    name: '青海省'
  }, {
    name: '西藏自治区'
  }, {
    name: '四川省'
  }, {
    name: '宁夏回族自治区'
  }, {
    name: '海南省'
  }, {

    name: '台湾省'
  }, {
    name: '香港特别行政区'
  }, {
    name: '澳门特别行政区'
  },
])
let currentSelect = ref('全部')
//选择不同疾病查看患病率
function onSelectChanged(val){
  if(val === "全部"){
    request.get("http://localhost:8090/admin/getAllDiseaseRate")
        .then(res=>{
          if(res.data.code === 200){
            data.value = res.data.data
            drawChina(data.value)
          }
        })
        .catch(err=>{
          console.log(err)
        })
  }
  else{
    request.get("http://localhost:8090/admin/getDiseaseRateByName",{
      params:{name:val}
    })
        .then(res=>{
          if(res.data.code === 200){
            data.value = res.data.data
            drawChina(data.value)
          }
        })
        .catch(err=>{
          console.log(err)
        })
  }

}
//绘制中国的省一级地图
function drawChina(mData) {
  echarts.registerMap('china', chinaJSON)
  myChart.value = echarts.init(document.getElementById('main'))
  let option = {
    title: {
      text: '国内各省份水稻情况分布',
      left: 'right'
    },
    tooltip: {
      trigger: 'item',
      showDelay: 0,
      transitionDuration: 0.2,
      valueFormatter: (value) => '患病数：' + Math.floor(value)
    },
    visualMap: {
      left: 'right',
      min: 0,
      max: 100,
      inRange: {
        color: [
          '#00ff00', // 绿色
          '#ccffcc',
          '#ffff66',
          '#ffff33',
          '#ffcc00',
          '#ff9900',
          '#ff0000' // 红色
        ]
      },
      text: ['高风险', '低风险'],
      calculable: true
    },
    toolbox: {
      show: true,
      //orient: 'vertical',
      left: 'left',
      top: 'top',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    series: [
      {
        name: '国内各省份水稻情况分布',
        type: 'map',
        roam: true,
        map: 'china',
        emphasis: {
          label: {
            show: true,
          }
        },
        data:mData
      }
    ]
  };
  myChart.value.setOption(option);
}
//点击按钮后发布预警信息
function submitWarningInfo(idx,row){
  form.value.province = row.name
  form.value.diseaseRate = row.value
  form.value.diseaseName = currentSelect.value
  dialogFormVisible.value = true
}
//根据不同的患病率设置不同行的样式
const tableRowClassName = ({row, rowIndex})=>{
  if (row.value <= 10){
    return 'low-risk'
  }
  else if (10 < row.value && row.value <= 30) {
    return 'mid-risk'
  }
  else {
    return 'high-risk'
  }
}
//预警信息表显示
let dialogFormVisible = ref(false)
//预警信息表的数据
let form = ref({
  province:"",
  diseaseRate:"",
  warningLevel:2,
  diseaseName:"",
  info:"",//预警信息,
  publicTime:""//发布时间
})
//取消提交预警信息
function cancelWarningInfo(){
  dialogFormVisible.value = false
  ElMessage({
    type:"info",
    message:"取消发布预警信息"
  })
}
//确认提交预警信息
function confirmWarningInfo(){
  dialogFormVisible.value = false
  let formData = {
    province:form.value.province,
    diseaseRate:form.value.diseaseRate,
    warningLevel:1,
    diseaseName:form.value.diseaseName,
    info:form.value.info,
    publicTime:getDateString()
  }
  request.post("http://localhost:8090/warningSystem/addWarningSystem",formData)
      .then(res=>{
        if(res.data.code === 200){
          ElMessage({
            type:"success",
            message:"发布预警信息成功"
          })
        }
        else{
          ElMessage({
            type:"error",
            message:"发布预警信息失败"
          })
        }
      })
      .catch(err=>{
        console.log(err)
      })
}

onBeforeMount(() => {

  request.get("http://localhost:8090/admin/getAllDiseaseRate")
      .then(res=>{
        if(res.data.code === 200){
          data.value = res.data.data
          console.log(data.value)
          drawChina(data.value)
        }
      })
      .catch(err=>{
        console.log(err)
      })

})

</script>

<style>
  .box {
    position: relative;
  }
  .distribution-table {
    position: absolute;
    left: 10px;
    top: 100px;
  }

  .low-risk {
    background-color: #ccffcc;
  }

.mid-risk {
    background-color: #e6e663;
  }

.high-risk {
    background-color: #e43e3e;
  }

</style>